<template>
	<view class="page-body paround40">
			<view class="h2">账户认证</view>
			<view class="textcode flex mt15">
				<text>您的账户</text>
				<input class="flex1" type="number" maxlength="11" placeholder-style="color:#c7c7c7"  v-model="usermobile" disabled />
			</view>
			<!-- 短信验证码 -->
			<view class="textcode flex" >
				<text class="flex0">验证码</text>
				<input class="flex1" maxlength="6" type="number" placeholder="短信验证码" v-model="textcode" placeholder-style="color:#c7c7c7" @input="bindCode" />
				<view :class="['btn btn-getcode flex0',isDisabledCode?'disabled':'']" @click="resendCode">{{cdNum}}</view>
			</view>
			<!-- 手机号码 -->
			<view :class="['button btn-next',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">下一步</view>
	</view>
	
</template>

<script>
	var that;
	import {isPoneAvailable,TimeStorage} from '@/utils/utils.js';
	import {
	    mapState,
	    mapMutations
	} from 'vuex'	
	import {bankcon} from '@/common/js/bankcon.js';
	import defalut from '@/components/defalut.vue'
	export default{
		data(){
			return{
				
				isNextStep:false,
				textcode:"",
				isDisabledCode:true,
				cdNum:"获取验证码",
			}
		},
		computed:mapState({
			usermobile(state){
				let usermobile = state.usermobile || TimeStorage.geted('mobile') ;
				usermobile.replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3")
				return usermobile
			}
		}),
		methods:{
			bindCode(e){
				let value=e.detail.value;
				if(value.length==6){
					// 校验验证码
					this.textcode=value;
					this.isNextStep=true
				}else{
					this.isNextStep=false
				}
			},
			resendCode(){
				if(this.isDisabledCode){
					return;
				}
				//接口请求验证码
				this.$https.POST({
					url:'/pay/regphoneVerifycodeApply',
					data:{
					},
					success(res){
						if(res.code==10000){
							uni.showToast({
								title:"动态验证码发送成功",
								icon:"none"
							})
							countBackwards()
						}
					},
					showfailsure(res){
						clearInterval(clock);
					}
				})
			},
			nextStep(){
				// uni.navigateTo({
				// 	url:"/pages/user/SAM/openaccount/bindaccount"
				// })
				// return;
				let textcode = this.textcode;
				if(this.isNextStep){
					this.$https.POST({
						url:'/pay/regphoneVerifycodeVerify', 
						data:{
							verify_code:textcode
						},
						success(res){
							uni.navigateTo({
								url:"/pages/user/SAM/openaccount/bindaccount"
							})
						}
					})
				}
			}
		},
		onLoad(options){
			that=this;
			if(this.usermobile!=""){
				this.isDisabledCode = false
			}
			
		},
		onShow(options){
		
		},
		components:{
			defalut
		}
	}
	
	// 1分钟倒计时
	var clock;
	function countBackwards() {
	    let nums = 59;
	    let isDisabled = true;
	    let vertifyCode = nums + 's';
	    that.cdNum=vertifyCode;
		that.isDisabledCode=isDisabled;
	    clock = setInterval(function () {
	        nums--;
			// console.log(nums)
	        if (nums > 0) {
	            vertifyCode = nums + 's';
	        } else {
	            clearInterval(clock);
	            isDisabled = false;
	            vertifyCode = '重发验证码';
	            nums = '59'
	        }
	        that.cdNum=vertifyCode;
			that.isDisabledCode=isDisabled
	        // console.log(nums)
	    }, 1000)
	}
</script>

<style lang="scss" scoped="">
	@import '../../../../static/css/user.css';
	.textcode{border-bottom: 1px solid #e9e9e9;height:112upx;}
	.bankcardbg{
		width: 670upx;height: 260upx; padding:26upx 35upx; color: rgba(255,255,255,.8);background:no-repeat left top/670upx 260upx; position:relative;
		.bank-msg{
			justify-content:space-between; height:72upx; 
			image{width: 70upx;height: 70upx;}
			.name{font-size:32upx;margin-left:5upx ;}
			.tel{font-size: 26upx;}
		}
		.br{position: absolute;right: 35upx;bottom: 16upx;
			.mantissa{font-size: 60upx;position: relative;bottom: 4upx;padding-right: 0;}
			text{font-size: 44upx;padding-right:25upx;}
		}
	}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			text-align: center;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 32upx;text-align: center;font-weight: bold;}
		.p{font-size: 24upx;color: #a9b0c0;line-height: 32upx;padding-top: 10upx;padding: 0 20upx;}
		.h6{font-weight: bold;color: #ff7202;padding-top:10upx;font-size: 28upx;}
		.btn-row-more{
			padding: 0;border-top: 1px solid $border-color; margin-top:35upx; font-size: 32upx;;
			.btn{height: 88upx;line-height: 88upx;text-align: center;color: #a9b0c0;}
			.btn:nth-of-type(1){border-right: 1px solid $border-color;color: #007aff;}
		}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
	.btn-go{background: $linear-color;width: 360upx;margin: 0 auto;}
	.btn-out{border:1px solid #E6E6E6;color: #0e1327;border-radius: 44upx;margin-top: 60upx;font-size: 32upx;}
	.statetxt{color:#A3AAB8;line-height: 46upx;width:572upx; margin:20upx auto 52upx;}
	.btn-next{margin-top: 70upx;}
</style>
